<template>
    <BaseEcharts :chatsOption="chatsOption"></BaseEcharts>
</template>

<script>
    import BaseEcharts from "../../../components/common/Cahrts/coreEcharts"

    export default {
        components: {
            BaseEcharts
        },
        props: {
            chatsOption: {
                type: Object,
                default() {
                    return {
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b0}{a0}: {c0}<br />',
                            axisPointer: {
                                type: 'line',
                                label: {
                                    backgroundColor: '#283b56'
                                }
                            },
                            textStyle: {
                                fontSize: 60,
                            },
                            padding: 20,
                            borderWidth: 4,
                            borderColor: "#48AFFF",
                            backgroundColor: "#010541",
                            extraCssText: "border-radius:20px;",

                        },
                        xAxis: [
                            {
                                type: 'value',
                                // name: '水量',
                                // min: 0,
                                // max: 250,
                                // interval: 50,
                                splitLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    formatter: '{value}',
                                    fontSize: 40,
                                    color: "#fff",
                                }
                            }

                        ],
                        yAxis: [
                            {
                                type: 'category',
                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                                axisPointer: {
                                    type: 'shadow'
                                },
                                axisLabel: {
                                    fontSize: 40,
                                    color: "#fff",
                                }
                            }
                        ],
                        series: [
                            {
                                name: '蒸发量',
                                type: 'bar',
                                itemStyle: {
                                    barBorderRadius: [0, 100, 100, 0],
                                    color: {
                                        type: 'linear',
                                        x: 1,
                                        y: 0,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0, color: '#7E60FF' // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.25, color: '#7576FF' // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.50, color: '#6C9EFF' // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.75, color: '#61C0FF' // 0% 处的颜色
                                            },
                                            {
                                                offset: 1, color: '#56ECFC' // 100% 处的颜色
                                            }
                                        ],
                                    },
                                },
                                // label: {
                                //     normal: {
                                //         show: true,
                                //         position: 'top',
                                //         fontSize: 25,
                                //     }
                                // },
                                data: [20, 49, 70, 22, 25, 77, 16, 12, 36, 20, 64, 33]
                            },


                        ]

                    }
                }
            }
        }

    }
</script>
